<script setup>

import ThreeImages from '@/components/common/ThreeImages.vue'
import StepTitleDescription from '@/components/common/StepTitleDescription.vue'

import { ref } from 'vue';

const stepTitleDescription = ref({
  "title": "Step 1",
  "description": "What style of drape hanging header would you like?",
});

const emit = defineEmits(["selected"]);

const selected = (selectedCurtainStyle) => {
   emit('selected', selectedCurtainStyle);
}

const curtainStyles = ref([
  {
    title: "Soft Top",
    image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A1Soft_Top.svg", // Replace with actual path
    description: "No pleats on top. Apply for 4-in-1, Hook belt, Flat hook, Tab top, Rod pocket, and Back tab. Consider fullness for width."
  },
  {
    title: "Pleated",
    image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A2.svg?v=1745720859", // Replace with actual path
    description: "For a structured, modern look. Apply for Pinch Pleat, Pinch Pleat with Back Tab, Triple Pleat, Tailor Pleat, Triple Tailor Pleat, Goblet, Inverted Box Pleat, Ripple Fold."
  },
  {
    title: "Grommets",
    image: "https://cdn.shopify.com/s/files/1/0744/8598/9591/files/Measurement-Finder_A3.svg?v=1745720901", // Replace with actual path
    description: "For a structured, modern look."
  }
]);

</script>

<template>

  <div>

    <StepTitleDescription :titleAndDescription="stepTitleDescription"/>

    <ThreeImages :curtainStyles="curtainStyles" @selected="selected"/>

  </div>

</template>

<style scoped>

h1{
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

</style>